<template>
    <div >
        <el-table v-if="!isVisitor" :data="books">

            <el-table-column prop="bookid" label="图书ID" width="100">

            </el-table-column>

            <el-table-column prop="bookname" show-overflow-tooltip label="图书名称" width="120">

            </el-table-column>

            <el-table-column prop="expiredate" show-overflow-tooltip label="过期时间" width="115">

            </el-table-column>

            <el-table-column prop="isnearlyexpire" show-overflow-tooltip label="图书状态（欠费1$/天）" width="200">

            </el-table-column>

            <el-table-column prop="" label="操作">
                <template slot-scope="scope">
                    <el-button @click="returnBook(scope.row)" :type="type" size="mini" icon="el-icon-refresh">归还
                    </el-button>
                </template>
            </el-table-column>
        </el-table>


        <div id="container">
            <img v-if="isVisitor" :src="require('../assets/img/404.gif')" height="300px"/>
        </div>

    </div>
</template>

<script>
    import main from "../main"
    import Vue from 'vue'

    export default {
        name: "MyBorrow",
        data() {
            return {
                isVisitor: false,
                type: 'primary',
                books: []
            }
        },
        mounted() {
            let name = sessionStorage.getItem("username")
            if (name === "visitor") {
                this.isVisitor = true;
            } else {
                this.showAllBorrowed();//查看所有已借的书
            }

            if(this.isVisitor == true){
                this.$message.error('您无权访问！')
            }

        },
        created() {

        },
        methods: {
            returnBook(row) {
                let bookid = row.bookid
                let _this = this
                axios.get(main.requestAddress + '/book/returnBook/' + bookid, {
                    params: {'username': sessionStorage.getItem("username")}
                }).then(function (response) {
                    let flag = response.data.data;
                    if (flag == true) {
                        _this.$message.success("归还成功！")
                        _this.showAllBorrowed()
                    } else {
                        _this.$message.error("归还失败！")
                    }
                }).catch(function (error) {
                    alert(error);
                });
            },
            showAllBorrowed() {
                const _this = this
                const _data = this.$data
                axios.get(main.requestAddress + '/book/showAllBooksBorrowed', {
                    params: {'username': sessionStorage.getItem("username")}
                }).then(function (response) {
                    _data.books = response.data.data
                    for (let i = 0; i < _data.books.length; i++) {
                        let status = _data.books[i].isnearlyexpire;
                        if (status == 1) //如果快过期了
                        {
                            status = '为避免欠费，请您尽快阅后归还';
                        } else if (status == 0) {
                            status = '借阅成功';
                        } else if (status == 2) {

                            status = '已欠费' + _data.books[i].owe + '元，请归还并缴费.'
                        }
                        _data.books[i].isnearlyexpire = status;
                    }

                    let length = response.data.data.length
                    if (length == 5) {
                        _this.$notify.warning({
                            title: '警告',
                            message: '当前您可借书目次数已达上限！若欲继续借阅，请您先至少归还一本。',
                            offset: 300
                        });
                    } else {
                        // _this.$notify.info({
                        //     title: '温馨提示',
                        //     message: '用户您好，您还可继续借阅' + (5 - length) + "本书籍！",
                        //     offset: 300
                        // });
                    }
                }).catch(function (error) {
                    alert(error);
                });
            }
        }
    }

</script>

<style >
    #container img {
        margin-left: 30%;
    }
</style>